<template>
	<view class="page-container back-grey-light pall-l">
		<!-- 举报内容 -->
		<view class="pall-l radius-l mb-l back-white">
			<view class="row-box">
				<text>举报内容</text>
				<text class="red">*</text>
			</view>
			<view class="mt-10">
				<text>{{ content }}</text>
			</view>
		</view>
		
		<!-- 举报原因 -->
		<view class="pall-l radius-l mb-l back-white">
			<view class="row-box">
				<text>举报原因</text>
				<text class="red">*</text>
			</view>
			<view class="reson-grid">
				<view v-for="(item, index) in reasons" :key="index" class="row-box" @click="selectReason(index)">
					<image v-if="type==index" class="mrow-base icon36" src="../static/option_1.png"></image>
					<image v-else class="mrow-base icon36" src="../static/option_0.png"></image>
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		
		<!-- 详情描述 -->
		<view class="pall-l radius-l mb-l back-white">
			<view class="row-box">
				<text>详情描述</text>
				<text v-if="type==2" class="red">*</text>
			</view>
			<textarea
				class="radius-base pcol-s prow-s back-grey mt-base detail-input"
				:maxlength="80"
				placeholder-style="fontSize: 26rpx;color: #999999;line-height: 32rpx;"
				placeholder="请填写详细说明情况"
				v-model="detail"
			>
			</textarea>
		</view>
		
		<!-- 相关证明 -->
		<view class="pall-l radius-l mb-l back-white">
			<text>相关证明</text>
			<!-- 上传图片区域 -->
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="pcol-l upload-grid">
					<view v-for="(item, index) in images" :key="index" class="upload-item">
						<image class="upload-image" :src="item" mode="aspectFill" @click.stop="previewImage(index, images)"></image>
						<view class="row-box center radius-circle icon-box">
							<u-icon name="close" color="#ffffff" size="28" :bold="true" @click.stop="removeImage(index)"></u-icon>
						</view>
					</view>
					<view v-if="images.length<limit" class="upload-item" @click="selectUploadHandle()">
						<image class="upload-image" src="/static/icon/upload.png" mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-box">
			<view class="submit-button back-primary" @click="submitHandle()">提交举报</view>
		</view>
		
	</view>
</template>

<script>
	import env from '@/utils/env.js'
	export default {
		data() {
			return {
				content: '', // 举报内容
				relatedId: null, // 关联表中举报信息id
				relatedType: null, // 1=动态评论;2=动态评论回复;3=动态
				reasons: ['广告营销', '色情低俗', '暴力恐怖', '政治敏感', '谣言诈骗', '谩骂诽谤', '其他原因'], // 举报原因
				type: null, // 当前选择的举报原因
				detail: '', // 详情
				
				qntoken: '',  // 七牛云上传token
				images: [], // 上传图片列表(选择图片后的临时地址列表)
				uploads: [],  // 上传后列表
				limit: 6, // 限制上传数量
			};
		},
		watch: {
			// 侦听图片上传后地址列表
			uploads(newValue, oldValue) {
				if ((newValue.length == this.images.length) && this.images.length!=0) {
					// 上传完所有图片
					// 调用提交接口
					this.submit()
				}
			},
		},
		onLoad(options) {
			this.relatedId = options.id
			this.relatedType = Number(options.type)
			this.content = options.content
			// 获取七牛上传使用TOKEN
			this.getUploadToken()
		},
		methods: {
			// 选择举报原因
			selectReason(index) {
				if (this.type == index) {
					this.type = null
				} else {
					this.type = index
				}
			},
			
			// 选择上传前
			async selectUploadHandle() {
				this.images = [...this.images, ...await this.chooseImages(this.limit-this.images.length)]
			},
			
			// 点击提交
			submitHandle() {
				if (!this.relatedId) {
					return uni.showToast({
						icon: 'none',
						title: '举报信息id不存在！',
						success: () => {
							uni.navigateBack()
						}
					})
				} else if (this.type==null) {
					return uni.showToast({
						icon: 'none',
						title: '未选择举报原因！'
					})
				} else if (this.type==6 && this.detail=='') { // 选择其他原因必须传入详情
					return uni.showToast({
						icon: 'none',
						title: '未填写详情描述！'
					})
				}
				
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				
				// 获取临时文件列表长度
				const length = this.images.length
				
				if (length > 0) { // 如果用户选择了图片
					
					// 先上传图片，上传完所有图片再调用提交的接口
					this.images.forEach((tempPath, index) => {
						let pathArr = tempPath.split('.')
						let extra = pathArr[pathArr.length-1]
						// 获得唯一标识码
						let uniqueCode = this.generateUUID()
						// case 'ECN': uploadURL = 'https://up.qiniup.com'
						// case 'NCN': uploadURL = 'https://up-z1.qiniup.com'
						// case 'SCN': uploadURL = 'https://up-z2.qiniup.com'
						// case 'NA': uploadURL = 'https://up-na0.qiniup.com'
						// case 'ASG': uploadURL = 'https://up-as0.qiniup.com'
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com',
							filePath: tempPath,
							name: 'file',
							formData: {
								'key': uniqueCode + '.' + extra,
								'token': this.qntoken,
							},
							success: (res) => {
								console.log('uni.uploadFile', res)
								let strToObj = JSON.parse(res.data)
								let backUrl = env.imageUrl + strToObj.key
								// 处理上传成功后的返回值
								this.uploads.push(backUrl)
							},
							fail: (err) => {
								console.log('uni.uploadFile', err)
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '提交失败！'
								})
							}
						})
					})
				} else { // 用户未选择图片
					// 调用提交接口
					this.submit()
				}
			},
			
			// 提交接口
			submit() {
				let params = {}
				params['type'] = this.type+1
				params['relatedId'] = this.relatedId
				params['relatedType'] = this.relatedType
				if (this.detail) params['description'] = this.detail
				if (this.uploads.length) params['image'] = this.uploads.join(',')
				this.$api.AddReport(params).then(res => {
					console.log('AddReport-success', res)
					uni.hideLoading()
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '提交成功，感谢您的反馈！',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '提交失败！'
						})
					}
				}).catch(err => {
					console.log('AddReport-fail', err)
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '提交失败！'
					})
				})
			}
		},
	}
</script>

<style lang="scss">
	// 原因栅格
	.reson-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 72rpx);
	}
	// 详情
	.detail-input {
		box-sizing: border-box;
		font-size: 26rpx;
		width: 100%;
		height: 168rpx;
	}
</style>
